<template>
  <div style="width:100%; height: 100%;">
    <mt-navbar v-model="selected">
      <mt-tab-item :id="1">样式</mt-tab-item>
      <mt-tab-item :id="2">数据源</mt-tab-item>
      <mt-tab-item :id="3">动作</mt-tab-item>
      <mt-tab-item :id="4">设置</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected" style="height: calc(100% - 50px)">
      <mt-tab-container-item :id="1">
        <EditOption></EditOption>
      </mt-tab-container-item>
      <mt-tab-container-item :id="2">

      </mt-tab-container-item>
      <mt-tab-container-item :id="3">

      </mt-tab-container-item>
      <mt-tab-container-item :id="4">
        <EditRow></EditRow>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import Vue from 'vue';
import MuseUI from 'muse-ui';
import 'mint-ui/lib/style.css';
import 'muse-ui/dist/muse-ui.css';
import Mint from 'mint-ui';
import EditRow from './EditRow';
import EditOption from './EditOption';

Vue.use(Mint);
Vue.use(MuseUI);

export default {
  name: 'Right',
  components: {
    EditOption,
    EditRow
  },
  data () {
    return {
      selected: 1
    }
  },
  methods: {

  }
}

</script>

<style scoped>
  a.mint-tab-item { margin-bottom: 0px!important; cursor: pointer }
  .f{ float: left }

</style>
